<template>
  <div class="points-config">
    <el-card>
      <div class="header">
        <span></span>
        <el-button type="primary" @click="saveConfig">保存</el-button>
        <el-button @click="resetConfig">重置</el-button>
      </div>
      <el-form :model="form" label-width="140px" style="max-width: 700px; margin-top: 24px;">
        <el-divider>抵扣规则</el-divider>
        <el-tabs v-model="activeTab">
          <el-tab-pane label="B端客户" name="B">
            <el-form-item label="抵扣比例">
              <el-input-number v-model="form.b.deductionRate" :min="0" :max="10000" />
              <span style="margin-left:8px;">积分抵1元（如100表示100积分抵1元）</span>
            </el-form-item>
            <el-form-item label="抵扣上限类型">
              <el-radio-group v-model="form.b.limitType">
                <el-radio label="fixed">固定上限</el-radio>
                <el-radio label="percent">按订单金额比例</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item v-if="form.b.limitType==='fixed'" label="固定上限">
              <el-input-number v-model="form.b.fixedLimit" :min="0" />
              <span style="margin-left:8px;">日元</span>
            </el-form-item>
            <el-form-item v-if="form.b.limitType==='percent'" label="比例上限">
              <el-input-number v-model="form.b.percentLimit" :min="0" :max="100" />
              <span style="margin-left:8px;">%（如20表示最多抵扣订单金额的20%）</span>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="C端客户" name="C">
            <el-form-item label="抵扣比例">
              <el-input-number v-model="form.c.deductionRate" :min="0" :max="10000" />
              <span style="margin-left:8px;">积分抵1元</span>
            </el-form-item>
            <el-form-item label="抵扣上限类型">
              <el-radio-group v-model="form.c.limitType">
                <el-radio label="fixed">固定上限</el-radio>
                <el-radio label="percent">按订单金额比例</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item v-if="form.c.limitType==='fixed'" label="固定上限">
              <el-input-number v-model="form.c.fixedLimit" :min="0" />
              <span style="margin-left:8px;">日元</span>
            </el-form-item>
            <el-form-item v-if="form.c.limitType==='percent'" label="比例上限">
              <el-input-number v-model="form.c.percentLimit" :min="0" :max="100" />
              <span style="margin-left:8px;">%</span>
            </el-form-item>
          </el-tab-pane>
        </el-tabs>
      </el-form>
      <el-divider>积分过期提醒</el-divider>
      <el-form :model="form" label-width="140px" style="max-width: 700px; margin-top: 0;">
        <el-form-item label="开启过期提醒">
          <el-switch v-model="form.expireRemind.enabled" active-text="开启" inactive-text="关闭" />
        </el-form-item>
        <el-form-item label="提前天数" v-if="form.expireRemind.enabled">
          <el-input-number v-model="form.expireRemind.days" :min="1" :max="90" />
          <span style="margin-left:8px;">天</span>
        </el-form-item>
        <el-form-item label="提醒方式" v-if="form.expireRemind.enabled">
          <el-checkbox-group v-model="form.expireRemind.methods">
            <el-checkbox label="系统推送通知" value="system" />
            <el-checkbox label="APP内顶部消息" value="app_top" />
            <el-checkbox label="红点消息" value="red_dot" />
            <el-checkbox label="弹窗提醒" value="popup" />
          </el-checkbox-group>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

const activeTab = ref('B')

const defaultConfig = {
  name: '积分',
  unit: '分',
  enabled: true,
  b: {
    deductionRate: 100,
    limitType: 'fixed', // fixed/percent
    fixedLimit: 100,
    percentLimit: 20
  },
  c: {
    deductionRate: 100,
    limitType: 'percent',
    fixedLimit: 50,
    percentLimit: 10
  },
  expireRemind: {
    enabled: false,
    days: 7,
    methods: ['system', 'app_top']
  }
}

const form = reactive(JSON.parse(JSON.stringify(defaultConfig)))

function saveConfig() {
  ElMessage.success('保存成功（mock）')
}
function resetConfig() {
  Object.assign(form, JSON.parse(JSON.stringify(defaultConfig)))
  ElMessage.info('已重置')
}
</script>

<style scoped>
.points-config { padding: 32px; }
.header { display: flex; justify-content: flex-start; align-items: center; gap: 16px; margin-bottom: 12px; }
</style> 